import tool from '@/utils/tool';

export const mounted = (el) => {
  const target = el;
  target.style.position = "relative";

  let cssText = '';
  const hide = createHideDiv();
  const show = createShowDiv();

  hide.onclick = () => {
    cssText = target.style.cssText;
    target.style.cssText = 'position: relative; ' +
      'width: 10px; ' +
      'overflow: hidden; ' +
      'border: none; ' +
      'padding: 0 0 0 10px!important; ' +
      'margin: 0 0 0 -10px!important;';
    hide.style.display = 'none';
    show.style.display = 'flex';
  };

  show.onclick = () => {
    target.style.cssText = cssText;
    hide.style.display = 'flex';
    show.style.display = 'none';
  };

  target.appendChild(hide);
  target.appendChild(show);
};

const createShowDiv = () => {
  const box = document.createElement('DIV');
  box.id = tool.uuid();
  box.style.position = 'absolute';
  box.style.display = 'none';
  box.style.flexDirection = 'row';
  box.style.justifyContent = 'start';
  box.style.alignItems = 'center';
  box.style.height = '100%';
  box.style.width = '0';
  box.style.top = '0';
  box.style.left = '0';
  box.style.userSelect = 'none';
  box.style.touchAction = 'none';

  const shape = document.createElement('DIV');
  shape.style.display = 'flex';
  shape.style.height = '50px';
  shape.style.width = '0';
  shape.style.zIndex = '10';
  shape.style.cursor = 'pointer';
  shape.style.borderLeft = '10px solid var(--el-color-primary)';
  shape.style.borderTop = '10px solid transparent';
  shape.style.borderBottom = '10px solid transparent';
  shape.style.userSelect = 'none';
  shape.style.touchAction = 'none';
  shape.title = '展开';

  const icon = document.createElement('I');
  icon.className = 'caret-right';
  icon.style.position = 'relative';
  icon.style.width = '0';
  icon.style.minWidth = 'unset';
  icon.style.color = 'white';
  icon.style.top = '18px';
  icon.style.right = '7px';
  icon.style.display = 'block';
  icon.style.userSelect = 'none';
  icon.style.touchAction = 'none';

  shape.appendChild(icon);
  box.appendChild(shape);

  return box;
}

const createHideDiv = () => {
  const box = document.createElement('DIV');
  box.id = tool.uuid();
  box.style.position = 'absolute';
  box.style.display = 'flex';
  box.style.flexDirection = 'row';
  box.style.justifyContent = 'end';
  box.style.alignItems = 'center';
  box.style.height = '100%';
  box.style.width = '0';
  box.style.top = '0';
  box.style.right = '0';
  box.style.userSelect = 'none';
  box.style.touchAction = 'none';

  const shape = document.createElement('DIV');
  shape.style.display = 'block';
  shape.style.height = '50px';
  shape.style.width = '0';
  shape.style.zIndex = '10';
  shape.style.cursor = 'pointer';
  shape.style.borderRight = '10px solid var(--el-color-primary)';
  shape.style.borderTop = '10px solid transparent';
  shape.style.borderBottom = '10px solid transparent';
  shape.style.userSelect = 'none';
  shape.style.touchAction = 'none';
  shape.title = '收缩';

  const icon = document.createElement('I');
  icon.className = 'caret-left';
  icon.style.position = 'relative';
  icon.style.width = '0';
  icon.style.minWidth = 'unset';
  icon.style.color = 'white';
  icon.style.top = '18px';
  icon.style.left = '-3px';
  icon.style.display = 'block';
  icon.style.userSelect = 'none';
  icon.style.touchAction = 'none';

  shape.appendChild(icon);
  box.appendChild(shape);

  return box;
}